<template>
  <div class="popup flex-center flex-align-items-center">
    <div class="main">
      <div class="main-header">
        <p>发件需知</p>
        <i class="iconfont icon-guanbi" @click="close"></i>
      </div>
      <div class="detail">
        <div class="detail-desc font-14 flex flex-align-items-center">为保障邮箱健康度，主子账号合计单日发送上限为5000封。</div>
        <div class="detail-desc font-14 flex flex-align-items-center">标题和正文中使用变量，有助于提升邮件打开率。</div>
        <div class="detail-desc font-14 flex flex-align-items-center">了解更多邮件优化技巧，请点击<span
            class="font-14 pointer">[查看链接]</span></div>
        <div class="detail-footer flex flex-align-items-center">
          <el-checkbox v-model="check" label="14天内不再提示" size="large" />
          <p class="font-14 pointer">我知道了</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineEmits, ref } from 'vue';

const emit = defineEmits(['close']);

const check = ref(false);

const close = () => {
  emit('close', null);
}
</script>

<style lang="less" scoped>
.main {
  position: relative;
  width: 480px;
  border-radius: 10px;
  background: #fff;

  .detail {
    padding: 16px 24px;

    .detail-desc {
      color: #333;
      line-height: 22px;

      &::before {
        content: "";
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 3px;
        background: @main-color;
        margin-right: 12px;
      }

      span {
        color: @main-color;
      }
    }

    .detail-footer {
      padding: 50px 70px 20px 20px;
      justify-content: end;

      p {
        width: 80px;
        height: 32px;
        border-radius: 6px;
        background: @main-color;
        color: #fff;
        text-align: center;
        line-height: 32px;
        margin-left: 16px;
      }
    }
  }
}
</style>
